<template>
	<div :class="['no-margin',hasMargin==1?'magrin':'']" :style="{background:background}">
    <van-list v-model="loading"
                :finished="finished"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                finished-text=""
                @load="onLoad">
      <diy-tpl :tplData="module"></diy-tpl>
    </van-list>
    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
  </div>
</template>

<script>
  import { getCityModuleData } from '@/api/shop/index'
  import diyTpl from '@/components/diyTpl/index'
  import { mpShare } from '@/utils/utils'
  import SmallLogin from '@/components/SmallLogin/smallLogin.vue'
  import small from '@/smallapp/small'
  import Vue from 'vue'
  export default Vue.extend({
    name: 'index',
    components: {
      diyTpl,
      SmallLogin
    },
    data() {
      return {
        cityModule_id: null,
        module: [],
        background: 'white',
        hasMargin: 0,
        firstLoading: true,
        loading: false,
        finished: false,
        error: false,
        p: 2
      }
    },
    watch: {
      // 如果当前页面跳转当前页面并且参数不一样直接刷新
      $route(to, from) {
        if (to.path == from.path && to.fullPath != from.fullPath) {
          window.location.reload()
        }
      }
    },
    beforeCreate() {
      document.title = ''
    },
    created() {
      window.addEventListener('wxload', query => {
        this.cityModule_id = this.$route.query.id ? this.$route.query.id : query.id
        this.init()
        small.HandleShareParams()
      })
      window.addEventListener('wxshow', () => {
        if (!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
        }
      })
      this.cityModule_id = this.$route.query.id
      
    },
    mounted() {
      // 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.onLoad()
      })
    },
    methods: {
      init() {
        const param = {}
        param.id = this.cityModule_id
        getCityModuleData(param).then(res => {
          if (res.status == 1) {
            this.firstLoading = false
            wx.setNavigationBarTitle({
              title: res.data.page_title
            })
            this.shareInfo = {
              title: res.data.jsapi_title || '',
              imgUrl: res.data.jsapi_img || '', // 分享图标
              shareParam: res.data.jsapi_url ? res.data.jsapi_url.split('?')[1] : `id=${this.cityModule_id}&sid=${small.globalData.shopId}&pid=${small.wxCache('global_login_info') ? small.wxCache('global_login_info').uid : '0'}`
            }
            mpShare (true, false, '/goods/pages/cityModule/index', this.shareInfo)
            this.background = res.data.backgroundColor
            this.module = res.data._diyHtml
            this.hasMargin = res.data.hasMargin
            
          }
        })
      },
      // 首页装修组件加载更多
      onLoad() {
        if (this.firstLoading) {
          this.loading = false
          return
        }
        const data = {
          p: this.p,
          id: this.cityModule_id
        }
        getCityModuleData(data).then(res => {
          if (res.status == 1) {
            this.loading = false
            const data = res.data
            this.module = this.module.concat(data._diyHtml)
            this.p++
            if (data._diyHtml.length < 10) {
              this.finished = true
            }
          }
        }).catch(() => {
          this.error = true
        })
      }
    }
  })
</script>

<style lang="scss">
.no-margin{
  &.magrin{
    padding: 0 20px;
  }
}
</style>
